import React, { Component } from 'react'
import { Input, Table } from 'antd'
import style from './TableDemo.module.less'
export default class TableDemo extends Component {
  constructor(props) {
    super(props)
    this.state ={
      name: 'dd'
    }
  }

  componentWillMount() {
    this.setState({
      dataSource: this.getTableData(),
      columns: this.getTableOptions()
    })
  }

  render() {
    return (
      <>
        <div className={style.filterArea}>
          <Input defaultValue={this.state.name} onChange={(event)=>this.nameChange(event)}></Input>
        </div>
        <div className="content">
          <Table className="" columns={this.state.columns} dataSource={this.state.dataSource}>

          </Table>
        </div>
      </>
    )
  }
  nameChange=(val)=>{
    console.log(val)
  }

  getTableData= () =>[
    {
      key: 1,
      name: '小红',
      address: '故宫四合院',
      age: '23'
    }
  ]

  getTableOptions = () => [
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    }
  ]
}
